/**
 *  Author: Wendy QQ 51594
 *
 * 人工输入转成标签
 * 失去焦点或回车 生成
 * 示例
 * html:
 * <input type="text" separator="|" theme-bar="btn-change-4" lay-skin="mytaginput" name="test_tags" placeholder="请输入标签"
 value="#(test.test_tags)" class="layui-hide">
 *js:
 *
 *   layui.use(['myTagInput'], function () {
        layui.myTagInput.render({});
    });

 *参数
 *
 * name         必   名字 ，
 * placeholder  选   分隔符
 * separator    选   分隔符，默认为 ，
 * theme-bar    选   背景样式，
 * theme-del    选   删除样式，
 * */
layui.define(["jquery", "layer"], function (exports) {
    var model_name = "myTagInput",
        tag_elem = "input[lay-skin='mytaginput']";

    var $ = layui.jquery, layer = layui.layer;

    var obj = {
        options: {
            elem: tag_elem,
            content: [],
            theme: {bar: 'color-inverse', del: 'btn-del'},
            placeholder: '请输入',//分隔符
            separator: ','//分隔符
        }
        , render: function (option) {
            var _this = this;
            _this.options = $.extend(_this.options, option);
            _this.style();
            $.each($(_this.options.elem), function () {
                var elem = $(this);
                elem.options = $.extend(true, {}, _this.options);
                elem.options.separator = elem.attr('separator') || elem.options.separator;
                elem.options.placeholder = elem.attr('placeholder') || elem.options.placeholder;
                elem.options.theme.bar = elem.attr('theme') || elem.attr('theme-bar') || elem.options.theme.bar;
                elem.options.theme.del = elem.attr('theme-del') || elem.options.theme.del;

                var $value = $(elem).attr("value") || '';
                if (!!$value)elem.options.content = $value.split(elem.options.separator);
                _this.init(elem);
            });
            return _this;
        }
        //配置单个inputtags
        , init: function (elem) {
            $(elem).hide();//隐藏原始窗口
            //把原始name配置给父层的div id
            var $tagDiv = $('<div>').attr({id: $(elem).attr("name")}).attr("tabindex", 0).attr("hidefocus", true).addClass('myinputtag-pdiv');
            var $tagInput = $('<input>').attr({placeholder: elem.options.placeholder, type: 'text', value: '', id: ''})
                .addClass('myinputtag-input').click(function () {
                });
            var $tagContent = '';
            $.each(elem.options.content, function (index, item) {
                if (!!item)$tagContent += '<div class="myinputtag-div" draggable="true" style="display:inline-block"><span class="' + elem.options.theme.bar + '"><em>' + item + '</em><button type="button" class="close ' + elem.options.theme.del + '">×</button></span></div>';
            })
            $tagDiv.append($tagContent).append($tagInput);
            $(elem).after($tagDiv);
            this.event(elem);

            var _this = this;
            //失去焦点
            $tagInput.blur(function () {
                _this.replace(elem, $tagInput);
            });
            //按回车键
            $tagInput.keypress(function (event) {
                var keynum = (event.keyCode ? event.keyCode : event.which);
                if (keynum == '13') {
                    event.preventDefault();
                    _this.replace(elem, $tagInput);
                }
            });
        }
        , replace: function (_elem, $tagInput) {
            var $val = $tagInput.val().trim();
            if (!$val) return false;
            if ($val.indexOf(_elem.options.separator) > -1) {
                layer.msg(" " + $val + " 不允许输入");
                return false;
            }
            if (_elem.options.content.indexOf($val) == -1) {
                _elem.options.content.push($val);
                var $span = '<div class="myinputtag-div"><span class="' + _elem.options.theme.bar + '"><em>' + $val + '</em><button type="button" class="close ' + _elem.options.theme.del + '">×</button></span></div>';
                $tagInput.before($span);
                $(_elem).val(_elem.options.content.join(_elem.options.separator));
            } else {
                layer.msg($val + " 已存在");
            }
            //写回调
            _elem.options.done && typeof _elem.options.done === 'function' && _elem.options.done(_elem, $val);
            //清空值
            $tagInput.val('');
            //重载事件
            this.event(_elem);
        }
        , event: function (elem) {
            var _this = elem;
            //光标
            $(elem).parent().find('.myinputtag-pdiv').on('click', function () {
                $(this).find('.myinputtag-input').focus();
            });
            //删除标签
            $(elem).parent().find('.myinputtag-div').on('click', '.close', function () {
                var Thisremov = $(this).parent('span').remove(),
                    ThisText = $(Thisremov).find('em').text();
                var index = _this.options.content.indexOf(ThisText)
                if (index != -1) _this.options.content.splice(index, 1);
                $(_this).val(_this.options.content.join(_this.options.separator));
            });
        }
        , style: function () {
            //默认样式
            var style = '<style>' +
                '.myinputtag-pdiv{min-height:38px;line-height: 1.3; line-height: 38px\9; border-width: 1px; border:1px #eee solid; background-color: #fff;border-radius:2px;padding-left:10px;margin:0}' +
                '.myinputtag-div{display:inline-block;margin-top:3px}' +
                '.myinputtag-input,myinputtag-input:focus{ width: 150px;margin: 0px;padding:0 6px;out-line:0 none;box-shadow: none;display:inline;line-height:38px;border:0 none;background-color: #fff;}' +
                '.myinputtag-div span{border-radius:2px;font-size: 12px;font-weight: normal;line-height: 16px;position: relative;display: inline-block;height: 16px;margin-right: 3px;margin-bottom: 1px;margin-top:2px;padding: 4px 22px 5px 9px;cursor: pointer;vertical-align: baseline;white-space: nowrap;color: #fff;}' +
                '.close{font-size: 12px;font-weight: bold;line-height: 20px;position: absolute;top: 0;right: 0;bottom: 0px;float: none;width: 18px;padding: 0px;cursor: pointer;text-align: center;opacity: 1;color: #fff;border: 0 none;background: transparent none repeat scroll 0 0;text-shadow: none;}' +
                '.close:hover{background: #ffb800;border-top-right-radius:2px;border-bottom-right-radius:2px}' +
                '' +
                '</style>';
            $('head').append(style);
        }
    }
    exports(model_name, obj);
});